<template>
	<view class="main" @click="$goURl(`/pages/index/couponDetail?id=${props.item.yhjId}&type=${props.type}`)">
		<view class="bg">
			<image src="/static/nbg.png" mode="aspectFill" v-if="props.type == 1"></image>
			<image :src="bg" mode="aspectFill" v-else></image>
			<view class="con">
				<view class="left">
					<view class="d">¥</view>
					<view class="price">{{ props.item.denomination }}</view>
				</view>
				<view class="right">
					<view class="time c">{{ props.item.expiryTime }}之前有效</view>
					<view class="name">{{ props.item.yhjName }}</view>
					<view class="tip c">{{ props.item.rule }}</view>
					<view class="user c">{{ props.item.nickName }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
	item: {
		type: Object
	},
	type: {
		type: Number,
		default: 1
	}
});

const bg = computed(() => {
	let now = new Date();
	let targetDate = new Date(props.item.expiryTime);
	let nowTimestamp = now.getTime();
	let targetTimestamp = targetDate.getTime();
	let bg = '';

	if (nowTimestamp > targetTimestamp || props.item.verified == 2) {
		bg = '/static/h-bg.png';
	} else {
		bg = '/static/nbg.png';
	}
	return bg;
});
</script>

<style lang="scss" scoped>
.main {
	margin: 10rpx 0;
	.bg {
		width: 690rpx;
		height: 216rpx;
		position: relative;
		image {
			width: 690rpx;
			height: 216rpx;
		}
		.con {
			position: absolute;
			top: 22rpx;
			left: 0;
			display: flex;
			align-items: center;
			padding: 0 35rpx;
			.right {
				display: flex;
				flex-direction: column;
				margin-left: 190rpx;
				.c {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 18rpx;
					color: #ffffff;
				}
				.name {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #ffffff;
					margin: 17rpx 0 12rpx 0;
				}
				.time {
				}
				.tip {
					margin-bottom: 31rpx;
				}
				.user {
				}
			}
			.left {
				display: flex;
				align-items: center;
				margin-right: 121rpx;
				position: absolute;
				left: 35rpx;
				.d {
					display: flex;
					justify-content: flex-end;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #000;
				}
				.price {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 44rpx;
					color: #000;
				}
			}
		}
	}
}
</style>
